const searchBar = document.querySelector("#search-books input");
searchBar.addEventListener("keyup", (e) => {
	console.log("事件：", e)
	console.log("输入框内容：",e.target.value)

    //页面上的所有书籍 
    const books = document.querySelectorAll("#book-list ul li");

    //将books转为数组，使用 forEach 循环
    Array.from(books).forEach((book) => {
        //获取单本书结构中的书名
        const title = book.firstElementChild.textContent;

        //判断书名和输入框的内容时候有相同的内容
        if (title.toLowerCase().indexOf(e.target.value) != -1) {
            //有相同的关键字，显示为 flex布局
            book.style.display = "flex";
        } else {
            //没有找到相同的关键字，隐藏
            book.style.display = "none";
        }
    });
});
const addForm = document.querySelector("form#add-book");
addForm.addEventListener("submit", (event)=>{
    event.preventDefault();
    const bookInputEle = addForm.querySelector("input[type='text']");
    const bookName = bookInputEle.value
    console.log("输入的书名是：", bookName)
    const liElement = document.createElement("li");
    const bookNameElement = document.createElement("span");
    const deleteBtnElement = document.createElement("span");
    bookNameElement.textContent = bookName;
    deleteBtnElement.textContent = "删除";
    bookNameElement.classList.add("name");
    deleteBtnElement.classList.add("delete");
    liElement.appendChild(bookNameElement);
    liElement.appendChild(deleteBtnElement);
    list.appendChild(liElement);
})
const tab_btn = document.querySelectorAll(".tab-buttons li");
const tab_buttons = document.querySelector(".tab-buttons");
const tab_contents = document.querySelectorAll(".tab-content");

tab_buttons.addEventListener("click", (event) => {

    if (event.target.tagName == "LI") {
        tab_lis.forEach((i) => i.classList.toggle("active"));
    }
    
});
const hideBox = document.querySelector("#hide");

//捕捉 change 单选框状态改变事件
hideBox.addEventListener("change", ()=> {
    //获取单选框状态值
    console.log("勾选了隐藏所有书籍", hideBox.checked)    
    if (hideBox.checked) {
        list.style.display = "none";
    } else {
        list.style.display = "initial";
    }
}); 
tab_buttons.addEventListener("click", (e) => {

    //点击的元素是 li 
    if (e.target.tagName == "LI") {
        // 切换tab 页面的 active 状态
        tab_btn.forEach((i) => i.classList.toggle("active"));

        //获取当前被点击的关联的是哪块内容
        const target_content = document.querySelector(e.target.dataset.target);

        //循环所有展示容器
        Array.from(tab_contents).forEach((content) => {
            //展示容器和点击查询出来的容器相符，添加 active 状态
            //不是则移除 active 状态
            if (content == target_content) {
                content.classList.add("active");
            } else {
                content.classList.remove("active");
            }
        });
    }
});
var booksArray = [
    { 
	    id: 1, 
	    title: '格林童话' , 
    	hide: false 
	},
    { 
	    id: 2, 
    	title: '论持久战', 
	    hide: false 
    },
];

  // 读书清单渲染函数
  function renderBookList(books) {
    // 清空内容
    list.innerHTML = "";
    // 遍历数据生成DOM
    books.forEach(function (books) {
      var li = document.createElement("li");
  
      const BookItemHTML = `
          <li data-id="${books.id}" 
              style="display: ${ books.hide ? "none" : "flex"}">
              <span class="name">${books.name}</span>
              <span class="delete" data-id="${books.id}">删除</button>
          <li>`;
      list.insertAdjacentHTML("beforeend", BookItemHTML);
    });
  }
  renderBookList(booksArray);
  function bindEvents() {
    //添加书籍，表单提交事件
    addForm.addEventListener("submit", ()=>{
	    //拦截表单提交行为
	    event.preventDefault();
    	//获取输入框对象，在 addForm 对象中找 input
	    const bookInputEle = addForm.querySelector("input[type='text']");
	    	
		//获取输入框内容
	    const bookName = bookInputEle.value.trim();
	
	    //没有输入内容则跳出程序
	    if (!bookName) return;
	    
	    //添加书籍到数组
	    addBook(bookName)
    	
	    bookInputEle.value = ''; // 清空输入框
    })

    //删除书籍
    list.addEventListener('click', function(e) {
        var id = Number(e.target.dataset.id);
        if (e.target.classList.contains('delete')) {
            deleteBook(id); // 调用删除方法
        }
    });
}

//添加新书籍函数
function addBook(book_name){
    // 添加到书籍数组中
    booksArray.push({
      id: Date.now(), // 用时间戳作为唯一ID
      title: book_name,
    });

	//调用渲染函数，传入书籍数组
    renderBookList(booksArray);
}
bindEvents();
function deleteBook(id) {
    //使用数组的 filter 函数
    booksArray = booksArray.filter(function(book) {
        return book.id !== id;
    });
    
    //调用渲染函数，传入书籍数组
    renderBookList(booksArray);
}
function bindEvents() {
	//添加书籍，表单提交事件
	//...
	//删除书籍
	//...
	//输入框输入事件
    searchBar.addEventListener("keyup", (e) => {
        const searchTitle = e.target.value

        //过滤了符合条件的书籍
        const searchBooks = booksArray.filter(function(book) {
            return book.title.toLowerCase().indexOf(searchTitle) != -1
        });
        
        //调用渲染函数，传入符合条件的书籍
        renderBookList(searchBooks.length > 0 ? searchBooks: booksArray);
    });
}
bindEvents();
renderBookList(booksArray);
